import React, { useRef } from 'react';
import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
import request from 'umi-request';
import { message, Button, Space } from 'antd';


// 返回结果的结构
interface GithubIssueItem {
  orderNo: string;  // 订单编号
  createTime: string; // 下单时间
  productName: string; // 商品名称
  number: number; // 商品数量
  pirce: number; // 商品单价
  totalPrice: string;// 总价
  state: string;// 状态
  desc: string;   // 备注描述
  id: number;
  orderUrl: string;  // 下单信息
}

const urging = (params) => {
  request<{}>('http://localhost:8000/api/order/urging', {
    params,
  }).then((result) => {
    if (result.code == 200) {
      message.success('催单成功');
    } else {
      message.error('催单失败');
    }
  }).catch((error) => {
    message.error(error);
  })
}

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: '序号',
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 72,
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    copyable: true,
    ellipsis: true,
    tip: '标题过长会自动收缩',
    width: '30%',
  },
  {
    title: '状态',
    dataIndex: 'state',
    initialValue: 'all',
    filters: true,
    valueEnum: {
      success: {
        text: '成功',
        status: 'Default'
      },
      open: {
        text: '未解决',
        status: 'Error',
      },
      closed: {
        text: '已解决',
        status: 'Success',
      },
      processing: {
        text: '解决中',
        status: 'Processing',
      },
    },
    width: '10%',
  },
  {
    title: '订单编号',
    hideInSearch: true,
    dataIndex: 'orderNo',
    width: '10%',
  },
  {
    title: '总价',
    hideInSearch: true,
    dataIndex: 'totalPrice',
    width: '10%',
  },
  {
    title: '下单时间',
    key: 'since',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    width: '20%',
  },
  {
    title: '操作',
    valueType: 'option',
    render: (text, row, _, action) => [
      <a onClick={() => urging(12)} key='urg'>
        催单
      </a>,
      <a href={row.html_url} target="_blank" rel="noopener noreferrer" key="warning">
        投诉
      </a>,
      <a href={row.html_url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>
    ],
  },
];

export default () => {
  const actionRef = useRef<ActionType>();

  return (
    <ProTable<GithubIssueItem>
      columns={columns}
      pagination={{
        showQuickJumper: true,
      }}
      actionRef={actionRef}
      request={async (params = {}) =>
        request<{
          data: GithubIssueItem[];
        }>('http://localhost:8000/api/order/list', {
          params,
        })
      }
      rowKey="id"
      dateFormatter="string"
      headerTitle="高级表格"
      search={{
        searchText: '查询',
        resetText: '重置',
      }}
    />
  );
};
